<template>
	<view v-if="dataInfo">
		
		<view v-if="popup_show" style="background-color: #000; z-index: 999; opacity: 0.8; color: white; width: 100%;height: 100vh;position: fixed; top: 0;left: 0;">
			<view @click="change" style="width: 10%; color: #fff; font-size: 36rpx; position: absolute; top: 40rpx; left: 90%;">X</view>
			<scroll-view style="width: 100%;height: 65vh; pointer-events: auto; top: 15vh; left: 5%; position: absolute; " scroll-y class="wanlshop-classify-container__one">
				<view style="width: 90%;height: 100%;text-align: center; overflow: scroll; line-height: 30rpx;">
					<view v-for="(item,index) in rank" :key="index" style="width: 100%;height: 60rpx;line-height: 60rpx; margin-top: 20rpx; text-align: center;font-size: 24rpx;">
						恭喜您！ 您在 “{{item.is_batch}}” 阶段， 排名：第 {{item.rank}} 名。
					</view>
				</view>
			</scroll-view>
		</view>
	
		
		<view class="head-box">
			<view class="head-con" style="position: relative;">
				<image class="user-img" mode="aspectFill" :src="$wanlshop.oss(dataInfo.avatar)" />

				<view class="shop-detail">
					<view class="shop-name" style="width: 87%;font-size: 32rpx;">
						<div class="container" style="position: relative;width:auto;">
							
							<span class="text" style="margin-right: 30rpx;">{{ dataInfo.shopname }}</span>
							<span @click="toggle('top')" v-if="count!=0" class="corner-mark">{{count}}</span>
							
						</div>
						
						<!-- <span style="color: red; margin-left:5px;font-size: 26rpx;">( 区域排名: 第 {{dataInfo.rank}} 名 )</span> -->

					</view>
					<view class="shop-num">ID:{{ dataInfo.shop_code }}</view>
				</view>
				
				<!-- <image @click="toggle('top')" v-if="count!=0" src="/static/icon4.png" style="position: absolute;top: -5rpx;left: 90%;width: 50rpx;height: 60rpx;" ></image>
				<view @click="toggle('top')" v-if="count!=0" style="position: absolute;top: -20rpx;left: 95%; font-size: 22rpx; text-align: center; line-height: 50rpx; width: 50rpx;height: 50rpx;background-color: red;border-radius: 50rpx;color: white;">
					{{count}}
				</view> -->
			</view>

			<view class="head-detail">
				<view class="three">
					<view class="title">团购套餐</view>
					<view class="number">{{ dataInfo.goods_num }}</view>
					<view class="name">昨日 {{ dataInfo.goods_yesterday_num }}</view>
				</view>
				<view class="three">
					<view class="title">订单数</view>
					<view class="number">{{ dataInfo.order_num }}</view>
					<view class="name">昨日 {{ dataInfo.order_yesterday_num }}</view>
				</view>
				<view class="three">
					<view class="title">成交额</view>
					<view class="number">{{ dataInfo.money_today }}</view>
					<view class="name">昨日 {{ dataInfo.money_yesterday }}</view>
				</view>
			</view>
		</view>
		<view class="box-detail">
			<view class="box-con">
				<view class="box-num">{{ dataInfo.payment_proxy_order_num }}</view>
				<view class="box-name">待付款</view>
			</view>
			<view class="box-con">
				<view class="box-num">{{ dataInfo.write_off_order_num }}</view>
				<view class="box-name">待核销</view>
			</view>
			<view class="box-con">
				<view class="box-num">{{ dataInfo.after_service_order_num }}</view>
				<view class="box-name">待售后</view>
			</view>
			<view class="box-con">
				<view class="box-num">{{ dataInfo.evaluate_order_num }}</view>
				<view class="box-name">待评价</view>
			</view>
		</view>
		<view class="title-name">基础工具</view>
		<view class="classification">
			<view class="classify" @click="kzt">
				<image :src="baseurl+'/imgs/kzt.png'" mode="widthFix" style="width: 50rpx;height: 50rpx;margin: auto;margin-top: 5rpx;"></image>
				<view>控制台</view>
			</view>
			<view class="classify" @click="onAddGoods">
				<image :src="common.appUrl.oss+common.imgList.sc21" mode="widthFix"></image>
				<view>发布团购</view>
			</view>
			<view class="classify" @click="goods">
				<image :src="common.appUrl.oss+common.imgList.sc27" mode="widthFix"></image>
				<view>团购管理</view>
			</view>
			<view class="classify" @click="shopOrder">
				<image :src="common.appUrl.oss+common.imgList.sc22" mode="widthFix"></image>
				<view>订单管理</view>
			</view>
			<view class="classify" @click="revenueRecords">
				<image :src="common.appUrl.oss+common.imgList.sc24" mode="widthFix"></image>
				<view>收款记录</view>
			</view>
			<view class="classify" @click="onZJGL">
				<image :src="common.appUrl.oss+common.imgList.sc25" mode="widthFix"></image>
				<view>资金管理</view>
			</view>
			<!-- <view class="classify" @click="classification">
				<image :src="common.appUrl.oss+common.imgList.sc29" mode="widthFix"></image>
				<view>分类管理</view>
			</view> -->
			<view class="classify" @click="bank">
				<image :src="common.appUrl.oss+common.imgList.sc26" mode="widthFix"></image>
				<view>银行卡</view>
			</view>
			<view class="classify" @click="manage">
				<image :src="common.appUrl.oss+common.imgList.sc28" mode="widthFix"></image>
				<view>店铺管理</view>
			</view>
			<view class="classify" @click="sendCode">
				<image :src="common.appUrl.oss+common.imgList.shop4" mode="widthFix"></image>
				<view>扫码核销团购</view>
			</view>
			<view class="classify" @click="sendCodeTwo">
				<image :src="common.appUrl.oss+common.imgList.shop4" mode="widthFix"></image>
				<view>扫码核销拼团</view>
			</view>
			<!-- <view class="classify" @click="onHXJL">
				<image :src="$staticImagePath('store/hxjl.png')" mode="widthFix"></image>
				<view>核销记录</view>
			</view> -->
			<view class="classify" @click="postManagement">
				<image :src="baseurl+'/imgs/lansebaotu.png'" mode="widthFix"></image>
				<view>岗位管理</view>
			</view>
			
			<view class="classify" @click="notesList">
				<image :src="baseurl+'/imgs/zisebaotu.png'" mode="widthFix"></image>
				<view>简历查看</view>
			</view>
			
			<view class="classify" @click="coupon">
				<image :src="baseurl+'/imgs/coupon.png'" mode="widthFix" style="width: 50rpx;height: 50rpx;margin: auto;margin-top: 5rpx;"></image>
				<view>优惠券</view>
			</view>
			
			<view class="classify" @click="refresh_link">
				<image :src="baseurl+'/uploads/20250107/463454c53c745ee10b5ebbe9efa9eca6.png'" mode="widthFix"></image>
				<view>刷新点</view>
			</view>
			
			<view class="classify" @click="bill">
				<image :src="common.appUrl.oss+common.imgList.sc25" mode="widthFix"></image>
				<view>对账单</view>
			</view>
			
			
		</view>
	</view>
</template>

<script>
	import {
		GetShopDetail,
		CheckOrder,
		SearchRank
	} from "@/utils/API.js";
	import {
		mapState,
	} from 'vuex';
	export default {
		computed: {
			...mapState(['common'])
		},
		data() {
			return {
				type: 'top',
				count:0,
				rank:[],
				popup_show:false,
				dataInfo: null, //店铺信息
				app: getApp().globalData,
				baseurl: getApp().globalData.baseurl,
			}
		},
		onShow() {
			this.getData();
		},
		methods: {
			toggle(type) {
				this.type = type;
				this.popup_show = true
			},
			change() {
				this.popup_show = false
			},
			search_rank_action(id){
				var that = this
				SearchRank({shop_id:id}).then(res => {
					that.count = res.data.count
					that.rank = res.data.list
				})
			},
			/**
			 * 订单管理
			 */
			shopOrder() {
				this.$wanlshop.to(`/pages/sc/shopOrder/shopOrder`);
			},
			refresh_link() {
				this.$wanlshop.to(`/pages/recharge/refresh_point`);
			},
			classification() {
				this.$wanlshop.to(`/pages/sc/classification/classification`);
			},
			revenueRecords() {
				this.$wanlshop.to(`/pages/new/revenueRecords/revenueRecords`);
			},
			bill(){
				this.$wanlshop.to(`/pages/new/bill/bill`);
			},
			bank() {
				this.$wanlshop.to(`/pages/user/bank/bank`);
			},
			manage() {
				this.$wanlshop.to(`/pages/sc/manage/manage`);
			},
			postManagement() {
				this.$wanlshop.to(`/pages/lc/postManagement/postManagement`);
			},
			notesList() {
				this.$wanlshop.to(`/pages/lc/notesList/notesList`);
			},
			kzt() {
				this.$wanlshop.to(`/pages/lc/kzt/kzt?shop_id=`+this.dataInfo.id);
			},
			coupon(){
				this.$wanlshop.to(`/pages/lc/kzt/coupon?shop_id=`+this.dataInfo.id);
			},
			
			
			/**
			 * 店铺码
			 */
			code() {
				let obj = {
					avatar: this.dataInfo.avatar,
					shopname: this.dataInfo.shopname,
					shopcode: this.dataInfo.shop_code,
					shop_code_image: this.dataInfo.shop_code_image,
				}
				this.$wanlshop.to(`/pages/new/code/code?obj=${JSON.stringify(obj)}`);
			},
			/**
			 * 商品管理
			 */
			goods() {
				this.$wanlshop.to(`/pages/new/goods/goods`);
			},
			/**
			 * 运费模版
			 */
			shipping() {
				this.$wanlshop.to(`/pages/new/shipping/shipping`);
			},
			/**
			 * 扫码核销
			 */
			sendCode() {
				let that = this;
				uni.scanCode({
					success: function(res) {
						console.log(4156465)
						console.log(res)
						console.log(4156465)
						that.hxData(res.result);
					}
				});
			},
			sendCodeTwo() {
				let that = this;
				uni.scanCode({
					success: function(res) {
						console.log(4156465)
						console.log(res)
						console.log(4156465)
						that.hxDatatwo(res.result);
					}
				});
			},
			hxDatatwo(code) {
				this.app.post('/api/shop.shop/CheckgroupOrder', {
					code: code
				}).then(res => {
					console.log(res)
					uni.showToast({
						title: '核销成功',
						icon: "none"
					})
				})
			},
			hxData(code) {
				this.$throttle(() => {
					CheckOrder(code).then(res => {
						this.$st.success("核销成功");
					})
				})
			},
			/**
			 * 添加商品
			 */
			onAddGoods() {
				this.$wanlshop.to("/pages/new/addProduct/addProduct");
			},
			/**
			 * 资金管理
			 */
			onZJGL() {
				this.$wanlshop.to("/pages/new/fundManage/fundManage");
			},
			/**
			 * 核销记录
			 */
			onHXJL() {
				this.$wanlshop.to("/pages/new/hxRecords/hxRecords");
			},
			/**
			 * 获取店铺信息
			 */
			getData() {
				GetShopDetail().then(res => {
					this.dataInfo = res.data;
					this.search_rank_action(this.dataInfo.id);
				})
			}
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #fff;
	}
	
	.container {
	  position: relative; /* 为角标定位提供参照 */
	  display: inline-flex; /* 保持容器宽度随内容变化 */
	  max-width: 100%; /* 防止超出父容器 */
	}
	
	.text {
	  padding-right: 20px; /* 为角标留出空间，防止文字被角标覆盖 */
	}
	
	.corner-mark {
	  position: absolute;
	  top: 0; /* 对齐第一行顶部 */
	  right: 0; /* 对齐容器右侧 */
	  
	  /* 角标样式 - 可根据需要调整 */
	  font-size: 0.7em;
	  background: #f00;
	  color: white;
	  padding: 7rpx 15rpx;
	  border-radius: 50rpx;
	  transform: translateY(-0%); /* 微调垂直位置 */
	}
	

	.head-box {
		width: 750rpx;
		background-color: #f7f7f7;
		display: flex;
		flex-wrap: wrap;
		padding-bottom: 50rpx;

		.head-con {
			width: 690rpx;
			margin-left: 30rpx;
			display: flex;
			align-items: center;
			margin-top: 30rpx;

			.user-img {
				width: 100rpx;
				height: 100rpx;
				border-radius: 50%;
			}

			.shop-detail {
				flex: 1;
				overflow: hidden;
				margin-left: 30rpx;

				.shop-name {
					font-size: 32rpx;
				}

				.shop-num {
					font-size: 26rpx;
					color: #999999;
					margin-top: 10rpx;
					
				}
			}
		}

		.head-detail {
			width: 750rpx;
			display: flex;
			padding: 58rpx 0;

			.three {
				width: 250rpx;
				text-align: center;

				.title {
					font-size: 24rpx;
					color: #999999;
				}

				.number {
					font-size: 36rpx;
					color: #333333;
					padding: 10rpx 0;
				}

				.name {
					font-size: 24rpx;
					color: #999999;
				}
			}
		}
	}

	.box-detail {
		width: 750rpx;
		background-color: #fff;
		position: relative;
		margin-top: -50rpx;
		border-radius: 30rpx 30rpx 0 0;
		padding: 70rpx 0;
		display: flex;

		.box-con {
			width: 25%;
			text-align: center;

			.box-num {
				font-size: 36rpx;
				color: #333333;
			}

			.box-name {
				font-size: 24rpx;
				color: #999999;
				margin-top: 10rpx;
			}
		}
	}

	.title-name {
		font-size: 32rpx;
		color: #3D3D3D;
		margin-left: 30rpx;
		padding-bottom: 50rpx;
	}

	.classification {
		display: flex;
		width: 750rpx;
		flex-wrap: wrap;

		.classify {
			width: 25%;
			margin-bottom: 40rpx;
			display: flex;
			flex-wrap: wrap;
			justify-content: center;

			image {
				width: 60rpx;
				height: 60rpx;
			}

			view {
				width: 100%;
				text-align: center;
				font-size: 26rpx;
				color: #3D3D3D;
				margin-top: 10rpx;
			}
		}
	}
</style>